<template>
	<gracePage footerBg="#FFFFFF" headerBG="#FFFFFF">
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">全部评价</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="grace-comments">
				<view class="grace-comments-items" v-for="(item, index) in commentContentss.list" :key="index">
					<image :src="item.user_picture" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">{{ item.user_name }}</text>
							<!-- <text class="grace-comments-header-text grace-icons">&#xe6ea; {{item.zan}}</text> -->
							<text class="grace-comments-info-text">{{ item.add_time }}</text>
						</view>
						<text class="grace-comments-content">{{ item.content }}</text>
						<view class="grace-comments-imgs" v-if="item.img">
							<view class="grace-comments-image" v-for="(img, indexImg) in item.img" :key="indexImg">
								<image :src="img.comment_img" mode="widthFix" class="grace-comments-img" @click.stop="showImgs(index, indexImg)"></image>
							</view>
						</view>
						<view v-if="item.reply">
							<text v-for="(itemRe, indexRe) in item.reply" :key="indexRe" class="grace-comments-replay">{{ itemRe.user_name }} : {{ itemRe.content }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 占位视图 用于避开底部遮盖 -->
			<view style="height:120rpx;"></view>
		</view>
		<!-- 底部提交输入框 -->
		<view class="grace-nowrap grace-flex-vcenter grace-bg-white" slot="gFooter">
			<view class="grace-footer-input-body">
				<text class="grace-footer-input-icon grace-icons icon-write"></text>
				<input type="text" value="" v-model="commentContent" placeholder="说点什么吧..." class="grace-footer-input" />
			</view>
			<text class="grace-footer-subtext grace-blue" @tap="submitCommnets">提交</text>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
const page = 1;
export default {
	data() {
		return {
			// 模拟评论数据 (实际项目来自api请求)
			commentContents: [
				{
					content: '故国三千里，深宫二十年。一声何满子，双泪落君前。',
					name: 'graceUI - 小码',
					face: 'https://graceui.oss-cn-beijing.aliyuncs.com/faces/1.png',
					date: '08/10 08:00',
					zan: 188,
					Reply: [{ name: '张晓曦', content: '不错不错' }, { name: '王大陆', content: '赞了~' }]
				},
				{
					content: '而今渐行渐远，渐觉虽悔难追。漫寄消寄息，终久奚为。也拟重论缱绻，争奈翻覆思维。纵再会，只恐恩情，难似当时。',
					name: '路过繁华',
					face: 'https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png',
					date: '02/10 18:00',
					zan: 288
				},
				{
					content: '图片回复，点击图片可以预览......',
					name: '林夕阳',
					imgs: [
						'https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/4.png',
						'https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/3.png',
						'https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/1.png'
					],
					face: 'https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png',
					date: '08/12 09:00',
					zan: 955
				}
			],
			commentContentss: [],
			commentContent: '',
			goodId: ''
		};
	},
	onLoad(e) {
		if (e.id) {
			this.goodId = e.id;
		}
	},
	created() {
		this.__init();
	},
	methods: {
		async __init() {
			let data = await this.$HTTP.post('/api/api.php', { act: 'get_comment', page: page, goods_id: this.goodId });
			this.commentContentss = data;
			console.log('this.commentContentss', data);
		},
		submitCommnets: function() {
			uni.showToast({
				title: '评论内容 : ' + this.commentContent,
				icon: 'none'
			});
		},
		// 回退事件
		navigateBackFn: function() {
			uni.navigateBack();
		},
		showImgs: function(commentsIndex, imgIndex) {
			console.log(commentsIndex, imgIndex);
			uni.previewImage({
				urls: commentsIndex,
				current: imgIndex
			});
		}
	},
	components: {
		gracePage
	}
};
</script>
<style>
/* 请根据项目来规划自己的图片大小，请对图片进行等比缩放 
.grace-comments-image{width:190rpx; height:138rpx; margin:5rpx; font-size:0; overflow:hidden;}
.grace-comments-img{width:190rpx; height:138rpx; border-radius:3rpx;}
*/
</style>
